<template>
  <div class="pages member">
    <div class="pageLevel" v-if="!sub">
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="是否启用：" label-width="100px" style="tableSearchs-f">
            <el-select size="mini" v-model="selectdatas.isEnabled" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-input v-model="selectdatas.keyword" size="mini" placeholder="请输入会员等级名称" style="width:250px;"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchSelect" class="Button">查询</el-button>
          </el-form-item>
          <el-form-item label="" class="serchAdd" label-width="15px" style="float:right;margin-right:50px;">
            <el-button v-if="isOwnAuth=='1'&&setRole('新增等级')" type="primary" size="mini" @click="routerPush()">新增等级</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableMain">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column v-if='storeyin' type="selection" width="55" align="center"> </el-table-column>
          <el-table-column prop="name" label="等级名称" align="center"></el-table-column>
          <el-table-column prop="levelDescribe" label="等级说明" align="center"></el-table-column>
          <el-table-column prop="num" label="现有会员数" align="center"></el-table-column>
          <el-table-column :formatter="status" prop="status" label="状态" align="center"></el-table-column>
          <el-table-column label="操作" align="center" v-if="storeyin">
            <template slot-scope="scope">
              <el-button type="text" v-if="isOwnAuth=='1'&&setRole('编辑')" size="small" @click="routerEdit(scope.row.id,scope.row,2)">编辑</el-button>
              <el-button type="text" v-else size="small" @click="routerEdit(scope.row.id,scope.row,1)">查看</el-button>
              <el-button type="text" class="delete" v-if="isOwnAuth=='1'&&setRole('删除')" v-show="scope.row.levelDescribe!='初始会员等级'" size="small" @click.native.prevent="deleteRow(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageblock">
        <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
        </el-pagination>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>

</template>
<script>
import { mapState } from "vuex";
import { deleteMemberLevel, listMemberLevel } from "@/api";
import util from "@/util";
import s from "@/util/state";
export default {
  computed: mapState(["sub", "power", "merchantId", "isOwnAuth"]),
  data() {
    return {
      storeyin: true,
      id: "",
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      tableData: [], //列表数据
      multipleSelection: [], //多选选择数据
      selectdatas: {
        isEnabled: "",
        keyword: ""
      } //搜索条件
    };
  },
  mounted() {
    this.list(this.pageSize, this.currentPage);
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.list(this.pageSize, this.currentPage);
        }
      },
      deep: true
    }
  },
  methods: {
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    status: s.status,
    routerPush() {
      util.routerTo(
        "/operate-management/member-management/member-level/new-memberLevel"
      );
    },
    routerEdit(id, row, type) {
      util.routerTo(
        "/operate-management/member-management/member-level/member-leveledit",
        {
          id: id,
          detail: row,
          type,
          type
        }
      );
    },
    // 查询
    searchSelect() {
      this.list(this.pageSize, this.currentPage);
    },
    list(pageSize, pageNum) {
      let data = {
        companyId: this.merchantId,
        pageSize: pageSize,
        pageNum: pageNum,
        keyword: this.selectdatas.keyword,
        status: this.selectdatas.isEnabled
      };
      listMemberLevel(data).then(res => {
        this.tableData = res.data.memberLevelList;
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].integral == 0) {
            this.tableData[i].integral = "--";
          }
        }
        this.totalItems = res.data.totalPage;
      });
    },
    //删除逻辑
    deleteRow(index, rows) {
      var text = "";
      this.$confirm("确定要删除会员等级" + rows.name + "吗？", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        type: "warning"
      })
        .then(() => {
          if (rows.num >= 1) {
            this.$message({
              type: "error",
              message: "该等级下已有会员，不能删除!"
            });
          } else {
            let data = {
              levelId: rows.id
            };
            deleteMemberLevel(data).then(res => {
              this.list();
              this.$message({
                type: "success",
                message: res.msg
              });
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.list(this.pageSize, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.list(this.pageSize, this.currentPage);
    },
    toPage() {
      this.list(this.pageSize, this.currentPage);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style scoped>
.head-s {
  width: 100%;
  height: 50px;
  position: relative;
}
.head-s h1 {
  font-size: 16px;
  font-weight: normal;
}
.head-select {
  width: 125px;
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 60px;
}
.head-to {
  width: 305px;
  position: absolute;
  top: 0;
  left: 200px;
}
.head-button {
  width: 95px;
  height: 30px;
  background: #999;
  color: #fff;
  position: absolute;
  border-radius: 8px;
  border: none;
  top: 0;
  right: 30px;
}
.fonts {
  width: 100%;
  margin-top: 10px;
}
</style>
